<template>
	<view class="box">
		<scroll-view style="width: 100%;height: 100vh;" @scrolltolower="scrolltolower" scroll-y="true">
		<view class="main">
			<view class="header">
				<view class="search">
					<u-icon name="search" class="icon"></u-icon>
					<input type="text" placeholder="请输入订单号" maxlength="28" v-model='orderId'/>
				</view>
				<view class="word" @click="search">搜索</view>
			</view>
			<view class="select">
				<view class="select-top">
					<view class="tabs">
						<view class="tab" v-for="(item,index) in productTest" :key="item.categoryId"
							@click="selectTab(item.categoryId)">
							<text class="tab-text"
								:class="{word:currentIndex === item.categoryId}">{{ item.categoryName }}</text>
							<view class="tab-marker" :class="{ 'active': currentIndex === item.categoryId }"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="select tabclass">
				<view class="select-top">
					<view class="tabs">
						<view class="tab" v-for="(item, index) in tabsData" :key="index" @click="selectTabClass(item.id)">
							<text class="tab-text" :class="{wordData:currentIndex1 === item.id}">{{ item.title }}</text>
							<view class="tab-text-class" :class="{ 'activeClass': currentIndex1 === item.id }"
								style="width: 35rpx;"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail" v-if="revenueData.length===0">
			<u-icon name="order" size="200"></u-icon>
			<span>数据为空</span>
		</view>
		<view class="detailTab" v-if="revenueData.length!==0" v-for="(item,index) in revenueData" :key="index">
			<view class="container">
				<view class="name">
					<view class="span-1" style="margin-right: 65rpx;">商品名称 :</view>
					<text>{{item.goodsName}}</text>
				</view>
				<view class="name">
					<view class="span-1" style="margin-left: 24rpx;margin-right: 26rpx;">订单号 :</view>
					<text>{{item.orderId}}</text>
				</view>
				<view class="name">
					<view class="span-1" style="margin-left: 50rpx;">收益 :</view>
					<text>{{item.income}}</text>
				</view>
				<view class="name">
					<view class="span-1" style="margin-left: 50rpx;">类型 :</view>
					<text>{{typeApi(item.type)}}</text>
				</view>
				<view class="name">
					<view class="span-1" style="margin-right: 50rpx;">商品类别 :</view>
					<text>{{item.categoryName}}</text>
				</view>
				<view class="name">
					<view class="span-1" style="margin-left: 50rpx;">状态 :</view>
					<text>{{stateApi(item.state)}}</text>
				</view>
			</view>
		</view>
		<view class="grace-loading" v-if="isLoadAll">{{ bottomText }}</view>
		</scroll-view>	
	</view>
</template>

<script>
	import {
		incomeRecords
	} from "@/apis/records.js"
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				tabs: [{
						title: '全部'
					},
					{
						title: '电话卡'
					},
					{
						title: '流量卡'
					},
					{
						title: '宽带'
					},
					{
						title: '靓号'
					},
					{
						title: '充值'
					}
				],
				tabsData: [{
						title: '全部',
						id:''
					},
					{
						title: '冻结中',
						id:'1'
					},
					{
						title: '已返佣',
						id:'3'
					},
					{
						title: '返佣失败',
						id:'2'
					}
				],
				currentIndex: 0,
				currentIndex1: '',
				contentShow: '1',
				revenueData: [],
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页显示的数量
				total: 0, // 总页数
				orderId:'',
				categoryId:'',
				isLoadAll: true,
			}
		},
		onShow() {
			this.currentIndex = this.productTest[0].categoryId;
			this.currentIndex1 = this.tabsData[0].id;
			this.currentPage = 1;
			this.total = 0;
			incomeRecords({
				size:this.pageSize,
				current:this.currentPage,
				orderId:this.orderId,
				categoryId:this.currentIndex,
				state:this.currentIndex1
			})
				.then(res => {
					this.revenueData = res.data.records;
					for(let val of this.revenueData){
						for(let item of this.productTest){
							if(val.categoryId==item.categoryId){
								val.categoryName = item.categoryName;
							}
						}
					}
				})
		},
		computed: {
			...mapState(['productTest']),
			bottomText() {
				if (this.revenueData.length < this.total && this.revenueData.length !== 0) {
					console.log('this.revenueData.length',this.revenueData.length,this.total)
					return "加载中..."
				} else {
					return "---没有更多数据---";
				}
			}
		},
		methods: {
			deviceAbnormalData() {
				//当list的长度刚好和total（总条数）一样，且list长度不为0的时候，说明，数据已经获取完毕，
				if (this.revenueData.length == this.total && this.revenueData.length != 0) {
					return;
				};
				this.currentPage = this.currentPage + 1;
				return incomeRecords({
					size:this.pageSize,
					current:this.currentPage,
					orderId:this.orderId,
					categoryId:this.currentIndex,
					state:this.currentIndex1
				})
					.then(res => {
						const {
							total,
							records
						} = res.data;
						if (this.revenueData) {
							this.revenueData = [...this.revenueData, ...records];
						} else {
							this.revenueData = [...records];
						}
						this.total = total;
					})
			},
			scrolltolower() {
				this.deviceAbnormalData();
			},
			search(){
				this.currentPage = 1;
				this.total = 0;
				incomeRecords({
					size:this.pageSize,
					current:this.currentPage,
					orderId:this.orderId,
					categoryId:this.currentIndex,
					state:this.currentIndex1
				})
					.then(res => {
						this.revenueData = res.data.records;
						for(let val of this.revenueData){
							for(let item of this.productTest){
								if(val.categoryId==item.categoryId){
									val.categoryName = item.categoryName;
								}
							}
						}
					})
			},
			typeApi(val) {
				if (val === '0') {
					return '直营订单'
				} else if (val === '1') {
					return '分销订单'
				}
			},
			stateApi(val){
				if (val === '1') {
					return '冻结'
				} else if (val === '2') {
					return '返佣失败'
				}else if (val === '3') {
					return '已返佣 '
				}
			},
			selectTab(index) {
				this.currentIndex = index;
				this.currentPage = 1;
				this.total = 0;
				incomeRecords({
					size:this.pageSize,
					current:this.currentPage,
					orderId:this.orderId,
					categoryId:this.currentIndex,
					state:this.currentIndex1
				})
					.then(res => {
						this.revenueData = res.data.records;
						for(let val of this.revenueData){
							for(let item of this.productTest){
								if(val.categoryId==item.categoryId){
									val.categoryName = item.categoryName;
								}
							}
						}
					})
			},
			selectTabClass(index) {
				this.currentIndex1 = index;
				this.currentPage = 1;
				this.total = 0;
				incomeRecords({
					size:this.pageSize,
					current:this.currentPage,
					orderId:this.orderId,
					categoryId:this.currentIndex,
					state:this.currentIndex1
				})
					.then(res => {
						this.revenueData = res.data.records;
						for(let val of this.revenueData){
							for(let item of this.productTest){
								if(val.categoryId==item.categoryId){
									val.categoryName = item.categoryName;
								}
							}
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		width: 750rpx;
		background-color: #F0EFF4;
		overflow: hidden;

		.main {
			height: 300rpx;
			width: 100%;
			background-color: white;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;

			.select {
				height: 80rpx;
				width: 710rpx;
				// margin: 8rpx 20rpx 10rpx 20rpx;
				background-color: white;
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 10rpx;

				.select-top {
					height: 100%;
					width: 100%;

					.tabs {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 100%;
						width: 100%;
					}

					.tab {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						height: 100%;
						width: 50%;
						overflow: hidden;
					}

					.tab-text {
						/* 文字样式 */
						color: gray;
					}

					.word {
						color: black;
					}

					.wordData {
						color: #2D9FFD;
						font-weight: 1000;
					}

					.tab-marker {
						width: 0;
						height: 2px;
						background-color: #2D9FFD;
						/* 标记颜色 */
						transition: width 0.4s ease;
						/* 动画效果 */
						margin-top: 10rpx;
					}

					.tab-marker.active {
						width: 30%;
					}

					.tab-text-class {
						width: 0;
						height: 2px;
						// background-color: #2D9FFD;
						/* 标记颜色 */
						transition: width 0.4s ease;
						/* 动画效果 */
						margin-top: 10rpx;
					}

					.activeClass {
						width: 30%;
						height: 2px;
						background-color: #2D9FFD;
						/* 标记颜色 */
						transition: width 0.4s ease;
						/* 动画效果 */
						margin-top: 10rpx;
					}
				}
			}
		}

		.header {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search {
				width: 88%;
				height: 60rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				background-color: white;
				margin-bottom: 20rpx;
				background-color: #F4F4F4;

				input {
					margin: 0 20rpx 0 0rpx;
					width: 600rpx;
				}

				.icon {
					margin: 0 20rpx;
				}
			}

			.word {
				// height: 100%;
				// line-height: 200rpx;
				// width: 70rpx;
				margin-bottom: 25rpx;
				// color: white;
			}
		}

		.detail {
			width: 100%;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			color: #BFC3CC;
		}

		.detailTab {
			width: 100%;
			// height: 100%;
			padding: 10rpx 30rpx 10rpx 30rpx;
			box-sizing: border-box;

			// padding: ;
			.container {
				background-color: white;
				width: 100%;
				min-height: 300rpx;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 25rpx;
				font-weight: bold;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-bottom: 18rpx;

				.name {
					width: 100%;
					min-height: 50rpx;
                    display: flex;
					// align-items: center;
					.span-1 {
						// margin-right: 80rpx;
						width: 140rpx;
						min-height: 40rpx;
					}
				}

				.span {
					margin-left: 30rpx;
				}
			}
		}
	}
	
	.grace-loading {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-weight: bold;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}
	
</style>